import Qfpage  from "../../components/Qfpage/Qfpage";
import React from 'react';
import 'antd/dist/antd.css';
import {  
    Table, 
    Button,
    Drawer , 
    Form, 
    Input, 
    InputNumber,
    notification,
    Modal,
    Col, 
    Row, 

} from 'antd';
import { useMemo,useEffect,useState, useRef,useCallback,useLayoutEffect} from "react";
import { getAllType, addType,delTyoe,editType} from "../../api/roomType";





const Room=()=>{ 
  const[showDeleBox,setShowDeleBox]=useState(false)
  const showDel=useCallback(()=>setShowDeleBox(true),[]); 
  

  const handleOk = () => {
    setShowDeleBox(false);
  };
      const [total ,setTotal] = useState(0);
      const [data,setData]=useState([]);
      const [limit,setLimit]=useState(30);
      const [page,setPage]=useState(1);
      
      // const[okid,setOkid]=useState()
     
      // console.log('data',data)

      const getData=async ()=>{
            const postData = { limit,page };

            // console.log("name",name)
            // console.log('price',price)
            if(name) postData.name = name;
            if(price) postData.price = price;
          
            let res = await getAllType(postData)
            const {success,data,count }=res;
            if(success) {
                  setData(data) 
                  setTotal(count)
                }
      }
     

      //条件过滤
      const [name,setName] = useState('');
      const [price,setPrice] =useState('')
      //
       useLayoutEffect(()=>{
           getData();
       },[limit,page])
    
     
    //抽屉 添加房型
     const columns = useMemo(()=>[
        {    
            title: '名字',
            dataIndex: 'name',
            key: 'name',
         },
         {    
            title: '价格',
            dataIndex: 'price',
            key: 'price',
         },
         {    
            title: '押金',
            key: 'yaPrice',
            dataIndex: 'yaPrice',
         },
         {    
            title: '简称',
            key: 'shortName',
            dataIndex: 'shortName',
         },
         {    
            title: '入住人数',
            key: 'liveLimit',
            dataIndex: 'liveLimit',
         },
         {    
            title: '开始入住人数',
            key: 'startLimit',
            dataIndex: 'startLimit',
         }, 
         {    
            title: '早餐券',
            key: 'couponNum',
            dataIndex: 'couponNum',
         },
         {    
            title: '床数',
            key: 'beds',
            dataIndex: 'beds',
         },
         {
          title: '操作',
          valueType: 'option',
          width: 200,
          render: (text,record) => [
            
            <a
             
                  key="delete"
                  onClick={() => {
                  // handlerDel(record._id)
                  // setOkid(record._id)
                  // console.log(record._id)
                    showConfirm(record._id)
              }}
            >
                   删除
            </a>,
              
            <a
                  key="delete"
                  onClick={() => {
                    openEdit(record)
                    }}
            >
                    修改
            </a>,
        ],
        },
          
         
     

        ])

    const [visible, setVisible] = useState(false);

    const showDrawer = () => {
      setVisible(true);
    };
  
    const onClose = () => {
      setVisible(false);
    };

    const formRef=useRef(null)
   

    //提交成功
    const onFinish = async (val) => {
        const values=  formRef.current.getFieldsValue(true);
        console.log('values',values);   
                     
        let res= await addType (values);
          const { success } = res;
        if(!success) notification.open({
          message: '提交失败',
        });
        notification.open({
          message: '提交成功',
        });
        getData();
        setVisible(false);
        formRef.current.resetFields();
      
      
      
  }
    
     //删除房型
       const handlerDel= async(id)=>{
      
        //  console.log('ok11',okid)
             let res =await delTyoe({typeid:id})
             const { success } = res;
             if(!success) notification.open({
               message: '删除失败',
             });
             notification.open({
               message: '删除成功',
             });
             getData();
       }

       const { confirm } = Modal;

       const showConfirm = (id) => {
         confirm({
           title: '确认删除?',
           
           onOk() {
            
            handlerDel(id)
           },
           onCancel() {
            handleOk
           },
         });
       };
     

      //修改房型
      const [showEdit,setShowEdit]=useState(false)

      const [editRef]=Form.useForm()

      const openEdit=(record)=>{
        // console.log(' editRef',editRef)
        
        editRef.setFieldsValue(record)
        setShowEdit(true);
      }
     

      const handleEdit = async () => {
        // console.log(editRef)
          const values=  editRef.getFieldsValue(true);
          console.log('values',values);                
          let res= await editType ({...values,typeid:values._id});
            const { success } = res;
          if(!success) notification.open({
            message: '修改失败',
          });
          notification.open({
            message: '修改成功',
          });
          getData();
          setShowEdit(false);
        
      }
      
      

      return (
        <Qfpage title='房型维护'>
          <Row  style={{padding:'8px'}}>
            <Col span={8}>
                <div> 
                    <Button 
                    onClick={showDrawer}
                    >
                        添加新房型
                    </Button>
                </div> 
            </Col>
            <Col span={8}>
            <Input.Group>
                <input 
                  placeholder="请输入你查询的房型"
                  onChange={setName}
                />

                <input 
                  placeholder="请输入你查询的价格"
                  onChange={setPrice}
                />
            </Input.Group>
            </Col>
            <Col span={8}>
            <Button 
            onClick={getData }>立即查询</Button>
            </Col>
          </Row>
            
          
         <Table 
            columns={columns} 
            dataSource={data} 
            pagination={
              {dafaultPageSize:limit,
               total:total,
               onChange({pageSize,current}){
                setPage(current);
                setLimit(pageSize)
          
             }
              }
            }
          />

          {/*抽屉*/}
          <Drawer
            title="添加房型" 
            placement="right" 
            onClose={onClose} 
            visible={visible}
            > 
                <Form
                      ref={formRef}
                      name="basic"
                      labelCol={{
                          span: 8,
                }}
                  wrapperCol={{
                    span: 16,
                  }}
                  initialValues={{
                    remember: true,
                  }}
                  onFinish={onFinish}
                  autoComplete="off"
                  initialValues={{
                    'input-number': 1,
            
                }}
              >
                <Form.Item
                   label="房型名称"
                   name='name'
                   rules={[
                    {
                      required: true,
                      message: '填写房型名称',
                    }]}
                >
                  <Input placeholder=''></Input>
                </Form.Item>
                <Form.Item
                   label="房间简称"
                   name='shortName'
                   rules={[
                    {
                      required: true,
                      message: '填写房间简称',
                    }]}
                >
                  <Input placeholder=''></Input>
                </Form.Item>

                <Form.Item 
                  label="床数"
                  name='beds'
                >
                     <InputNumber min={1} max={10} />
                </Form.Item>
                <Form.Item
                   label="价格"
                   name='price'
                   rules={[
                    {
                      required: true,
                      message: '填写价格',
                    }]}
                >
                  <Input placeholder='请输入价格'></Input>
                </Form.Item>
                <Form.Item
                   label="押金"
                   name='yaPrice'
                   rules={[
                    {
                      required: true,
                      message: '填写押金',
                    }]}
                >
                  <Input placeholder='请输入押金'></Input>
                </Form.Item> 

                <Form.Item label="入住人数" name='liveLimit'>
                        <InputNumber min={1} max={6} />
                </Form.Item> 
                <Form.Item label="开始入住人数" name='startLimit'>
                        <InputNumber min={1} max={6} />
                </Form.Item> 


                <Form.Item 
                label="早餐券数量"
                name='couponNum'
                >
                        <InputNumber min={1} max={10} />
                </Form.Item>
                <Button 
                    type="primary" 
                    htmlType="submit">
                   提交
                  </Button>
              </Form>

      </Drawer>
     
     
      {/*修改房型*/}
      <Drawer
            title="立即修改" 
            placement="right" 
            onClose={()=> setShowEdit(false) }
            visible={showEdit}
            
            > 
              <Form
                    form={editRef}
                    name="basic"
                    labelCol={{
                        span: 8,
               }}
               wrapperCol={{
                 span: 16,
               }}
               initialValues={{
                 remember: true,
               }}
               onFinish={handleEdit}
               autoComplete="off"
               initialValues={{
                'input-number': 1,
           
              }}
              >
                <Form.Item
                   label="房型名称"
                   name='name'
                   rules={[
                    {
                      required: true,
                      message: '填写房型名称',
                    }]}
                >
                  <Input placeholder=''></Input>
                </Form.Item>
                <Form.Item
                   label="房间简称"
                   name='shortName'
                   rules={[
                    {
                      required: true,
                      message: '填写房间简称',
                    }]}
                >
                  <Input placeholder=''></Input>
                </Form.Item>

                <Form.Item 
                  label="床数"
                  name='beds'
                >
                     <InputNumber min={1} max={10} />
                </Form.Item>
                <Form.Item
                   label="价格"
                   name='price'
                   rules={[
                    {
                      required: true,
                      message: '填写价格',
                    }]}
                >
                  <Input placeholder='请输入价格'></Input>
                </Form.Item>
                <Form.Item
                   label="押金"
                   name='yaPrice'
                   rules={[
                    {
                      required: true,
                      message: '填写押金',
                    }]}
                >
                  <Input placeholder='请输入押金'></Input>
                </Form.Item> 

                <Form.Item label="入住人数" name='liveLimit'>
                        <InputNumber min={1} max={6} />
                </Form.Item> 
                <Form.Item label="开始入住人数" name='startLimit'>
                        <InputNumber min={1} max={6} />
                </Form.Item> 


                <Form.Item 
                label="早餐券数量"
                name='couponNum'
                >
                        <InputNumber min={1} max={10} />
                </Form.Item>
                <Button 
                    type="primary" 
                    htmlType="submit">
                   提交
                  </Button>
              </Form>

      </Drawer>
       
      
        </Qfpage>
    )
}
export default Room;    